<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="标签管理" name="first">
      <el-row class="user-list">
        <el-table
          ref="multipleTable"
          :data="tagListData"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            label="id"
            width="300">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column
            label="标签名"
            width="350">
            <template slot-scope="scope">
              <el-input
                placeholder="请输入内容"
                v-model=" scope.row.name "
                :disabled="true">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="数量" width="300">
            <template slot-scope="scope">{{ scope.row.count }}</template>
          </el-table-column>
          <el-table-column
            label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="danger" @click="delTag(scope.row.id,scope.row.name)" size="mini">删除</el-button>
              <el-button type="primary" @click="modifyTag(scope.row.id,scope.row.name)" size="mini">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="user-btn">
          <el-button type="primary" @click="modifyTag()" size="small">添加新标签</el-button>
          <el-button type="warning" @click="synchroTag()" size="small">同步标签</el-button>
        </div>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        activeName: 'first',
        tagListData: []
      }
    },
    mounted() {
      this.tagList()
    },
    methods: {
      tagList() {
        let _self = this
        _self.$ajax.post('/weChat/tagList').then(function (response) {
          if (response.data.code === 0) {
            _self.tagListData = response.data.data
          } else {
            _self.$message({
              type: 'info',
              message: '获取标签失败！'
            })
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      modifyTag(id, oldName) {
        const _self = this
        id = id || null
        oldName = oldName || null
        this.$prompt('请输入的标签名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^.{0,10}$/,
          inputErrorMessage: '最多10个字'
        }).then(({value}) => {
          _self.$ajax.post('/weChat/modifyTag', {
            name: value,
            oldName: oldName,
            id: id
          }).then(function (response) {
            if (response.data.code === 0) {
              _self.$message({
                type: 'success',
                message: response.data.msg
              })
              _self.tagList()
            } else {
              _self.$message({
                type: 'info',
                message: response.data.msg
              })
            }
          }).catch(function (error) {
            console.log(error)
          })
        }).catch(() => {
        })
      },
      synchroTag() {
        const _self = this
        this.$confirm('是否确认要同步标签信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _self.$ajax.post('/weChat/WXtagList').then(function (response) {
            if (response.data.code === 0) {
              _self.$message({
                type: 'success',
                message: response.data.msg
              })
              _self.tagList()
            } else {
              _self.$message({
                type: 'info',
                message: response.data.msg
              })
            }
          }).catch(function (error) {
            console.log(error)
          })
        }).catch(() => {
        })
      },
      delTag(id, name) {
        const _self = this
        this.$confirm('是否确认要删除标签?（如果该标签下用户超过10W,则不能删除该标签。）', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _self.$ajax.post('/weChat/delTag', {
            id: id,
            name: name
          }).then(function (response) {
            if (response.data.code === 0) {
              _self.$message({
                type: 'success',
                message: response.data.msg
              })
              _self.tagList()
            } else {
              _self.$message({
                type: 'info',
                message: response.data.msg
              })
            }
          }).catch(function (error) {
            console.log(error)
          })
        }).catch(() => {
        })
      }
    },
    watch: {}
  }
</script>
<style lang="less" scoped>
  @import 'userTag.less';
</style>
